<template>
    {{categoryId}}
    <el-table :data="products" stripe style="width: 100%">
    <el-table-column prop="productId" label="Product Id" width="180" />
    <el-table-column prop="categoryId" label="Category" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column>
        <template #default="scope">
            <el-button @click="redirect(scope.row.productId)">view&nbsp;{{scope.row.name}}&nbsp;items</el-button>
        </template>
    </el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onActivated, onMounted, ref } from 'vue'
import router from '../router'
import { reactive } from 'vue'
var username=sessionStorage.getItem("username");
export default {
    name: "product",
    props: {
        categoryId: String
    },
      setup(props){
          const haha = reactive({
            action:"View "+props.categoryId+" All products"
        })

        //  const addLog=(username,action)=>
        // {
        //     return axios.post("/account/"+username+"/logg/"+action).catch(e => {
        //         console.log(e.res.data) ;
        //     })
        // }

        const products = ref([])
        console.log(props.categoryId);
        const getProduct = (category) => {
            return axios.get("/category/categories/"+category+"/products").then(res => {
                console.log(res.data);
                return res;
            }).catch(e => {
                return e.res.data;
            })
        }
        const redirect = (productId) => {
            router.push({ path: "/item/" + productId });
            // location.reload();
        }
        onMounted(async () => {
            // await addLog(username,haha.action);
            const data = await getProduct(props.categoryId);
            products.value = data.data.data;
        })
        onActivated(async () => {
            console.log(props.categoryId);
            const data = await getProduct(props.categoryId);
            products.value = data.data.data;
        })
        return{
            products,
            redirect
        }
    }  
   
}
</script>